<template>
  <div style="background-color: white;height: 750px;padding-left: 10px;padding-top: 5px;margin-top: 10px">
    <h1>地址信息</h1>
    <hr>
    <p>省：{{tAdress.province}}||市：{{tAdress.city}}||区：{{tAdress.district}}</p>


    <br>
    <br>
    提货单位：<el-input v-model="tAdress.unit" placeholder="请输入内容" style="width: 300px"></el-input> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    提货联系人：<el-input v-model="tAdress.linkman" placeholder="请输入内容" style="width: 200px"></el-input>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    联系人电话：<el-input v-model="tAdress.tel" placeholder="请输入内容" style="width: 200px"></el-input>
    <br>
    <br>
    <br>
    <br>
    提货省份：
    <template>
      <el-select v-model="tAdress.province" placeholder="请选择">
        <el-option
          v-for="item in provinces"
          :key="item.areaid"
          :label="item.areaname"
          :value="item.areaname" >
        </el-option>
      </el-select>
    </template>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    市：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <template>
      <el-select v-model="tAdress.city" placeholder="请选择">
        <el-option
          v-for="item in citys"
          :key="item.areaid"
          :label="item.areaname"
          :value="item.areaname">
        </el-option>
      </el-select>
    </template>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    区：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <template>
      <el-select v-model="tAdress.district" placeholder="请选择">
        <el-option
          v-for="item in districts"
          :key="item.areaid"
          :label="item.areaname"
          :value="item.areaname">
        </el-option>
      </el-select>
    </template>
    <br>
    <br>
    <br>
    <br>
    详细地址：<el-input v-model="tAdress.fullAddress" placeholder="请输入内容" style="width: 400px"></el-input> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <br>
    <br>
    <hr>
    <br>
    收货单位：<el-input v-model="fAdress.unit" placeholder="请输入内容" style="width: 300px"></el-input> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    收货联系人：<el-input v-model="fAdress.linkman" placeholder="请输入内容" style="width: 200px"></el-input>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    联系人电话：<el-input v-model="fAdress.tel" placeholder="请输入内容" style="width: 200px"></el-input>
    <br>
    <br>
    <br>
    <br>
    收货省份：<template>
    <el-select v-model="fAdress.province" placeholder="请选择">
      <el-option
        v-for="item in provinces2"
        :key="item.areaid"
        :label="item.areaname"
        :value="item.areaname" >
      </el-option>
    </el-select>
  </template> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    市：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <template>
      <el-select v-model="fAdress.city" placeholder="请选择">
        <el-option
          v-for="item in citys2"
          :key="item.areaid"
          :label="item.areaname"
          :value="item.areaname">
        </el-option>
      </el-select>
    </template>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    区：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <template>
      <el-select v-model="fAdress.district" placeholder="请选择">
        <el-option
          v-for="item in districts2"
          :key="item.areaid"
          :label="item.areaname"
          :value="item.areaname">
        </el-option>
      </el-select>
    </template>
    <br>
    <br>
    <br>
    <br>
    详细地址：<el-input v-model="fAdress.fullAddress" placeholder="请输入内容" style="width: 400px"></el-input> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <br>
    <el-button type="danger" round style="width: 100px" @click="save" id="save">保存</el-button>
  </div>
</template>

<script>
    export default {
        name: "rbasicinfo",
        data(){
          return{
            provinces:[],
            citys:[],
            districts:[],
            provinces2:[],
            citys2:[],
            districts2:[],
            tAdress:{
              orderId:'',
              unit:'',
              linkman:'',
              tel:'',
              province:'',
              city:'',
              district:'',
              fullAddress:''
            },
            fAdress:{
              orderId:'',
              unit:'',
              linkman:'',
              tel:'',
              province:'',
              city:'',
              district:'',
              fullAddress:''
            },
            orderId:'',
            address:{
              tAddrinfo:{
              },
              fAddrinfo:{

              }
            }
          }
        },
      watch:{
        "tAdress.province":{
          handler(){
            this.provinceChange();
          }
        },
        "tAdress.city":{
          handler(){
            this.citysChange();
          }
        },
        "fAdress.province":{
          handler(){
            this.provinceChange2();
          }
        },
        "fAdress.city":{
          handler(){
            this.citysChange2();
          }
        }


      },
      methods:{
        provinceChange2(){
          console.log(this.tAdress.province);
          this.citys2=[];
          this.fAdress.city='';
          this.$http({
            method: "GET",
            url: "http://localhost:8090/tAddrinfo/getcity",
            params:{province:this.fAdress.province}
          }).then(resp => {
            console.log(resp);
            this.citys2=resp.data.data.citys;
          })
        },
        citysChange2(){
          this.districts2=[];
          this.fAdress.district='';
          this.$http({
            method: "GET",
            url: "http://localhost:8090/tAddrinfo/getdistricts",
            params:{city:this.fAdress.city,
              province:this.fAdress.province}
          }).then(resp => {
            console.log(resp);
            this.districts2=resp.data.data.districts;
          })
        },
        provinceChange(){
          console.log(this.tAdress.province);
          this.citys=[];
          this.tAdress.city='';
          this.$http({
            method: "GET",
            url: "http://localhost:8090/tAddrinfo/getcity",
            params:{province:this.tAdress.province}
          }).then(resp => {
            console.log(resp);
            this.citys=resp.data.data.citys;
          })
        },
        citysChange(){
          this.districts=[];
          this.tAdress.district='';
          this.$http({
            method: "GET",
            url: "http://localhost:8090/tAddrinfo/getdistricts",
            params:{city:this.tAdress.city,
              province:this.tAdress.province
            }
          }).then(resp => {
            console.log(resp);
            this.districts=resp.data.data.districts;
          })
        },
          getaddr(){
            this.$http({
              method: "GET",
              url: "http://localhost:8090/tAddrinfo/getaddr",
            }).then(resp => {
              console.log(resp);
              this.provinces=resp.data.data.provinces;
              this.provinces2=resp.data.data.provinces;
            })
          },


          load(){
            this.$http({
              method: "GET",
              url: "http://localhost:8090/tAddrinfo",

            }).then(resp => {
              console.log(resp);
              this.tAdress=resp.data.data.address.tAddrinfo;
              this.fAdress=resp.data.data.address.fAddrinfo;
              resp.data.data.address
            })

          },
          getAId(){
            this.orderId=this.$route.params.id;
            this.tAdress.orderId=this.$route.params.id;
            this.fAdress.orderId=this.$route.params.id;
          },
        save(){
            this.address.tAddrinfo=this.tAdress;
            this.address.fAddrinfo=this.fAdress;
          this.$http({
            method: "POST",
            url: "http://localhost:8090/tAddrinfo",
            data: this.address
          }).then(resp => {
            let id=this.tAdress.orderId;
            alert(resp.data.msg);
            this.$router.push(`/home/creatorder/goods/${id}`);
          })
        }
      },
      created() {
          this.getAId();
          this.load();
          this.getaddr();
      }
    }
</script>

<style scoped>
  #save{
    float: right;
    margin-right: 120px;
  }
</style>
